<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        th, td {
            text-align: center;
            border: 1px solid;
        }

        div {
            text-align: center;
            margin: 100px;
        }

    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>

    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void (0)" onclick="del_tr(this)">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del_tr(this);">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void (0);" onclick="del_tr(this)">删除</a></td>
    </tr>
</table>

</body>
</html>
<script>
    //使用innerHTML添加;
    document.getElementById("btn_add").onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //获取tabl
        var table = document.getElementsByTagName("table")[0];
        table.innerHTML += "<tr>\n" +
            "<td>" + id + "</td>\n" +
            "<td>" + name + "</td>\n" +
            "<td>" + gender + "</td>\n" +
            "<td><a href='javascript:void(0);' onclick='del_tr(this);'>删除</a></td>\n" +
            "</tr>";
    }

    //删除一行
    function del_tr(obj) {
        var table = obj.parentNode.parentNode.parentNode;//获取表对象
        var tr = obj.parentNode.parentNode;//获取行对象
        table.removeChild(tr)
    }

</script>
